<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script>var headStart = new Date().getTime();</script>
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
  <link rel="stylesheet" href="/dist/index.css">
  <!-- 使用 内联样式 性能提高很多！ -->
  <style></style>
</head>
<body>
  <div id="example"><div style="padding: 500px 100px">loading...</div></div>
  <div id="loger"></div>
  <script>
    function loger() {
      if (typeof console !== 'undefined' && console.log) {
        try {
          console.log.apply(null, arguments);
        } catch (error) {
          // on Mobile maybe throw "TypeError: Illegal invocation"
        }
      }
      var args = Array.prototype.slice.call(arguments);
      var ele = document.getElementById('loger');
      ele.style.cssText = "position:fixed;z-index:99999;left:0;bottom:2rem;background:rgba(0,0,0,.5);color:#fff;padding:5px; max-height:2rem; overflow-y: auto;";
      ele.innerHTML += args.join(' ') + '<br /><br />';
    }
    function getPerformanceTiming () {
      var performance = window.performance;
      var timing = performance.timing;
      var times = {}
      if (!performance || !timing) {
        console.log('你的浏览器不支持 performance 接口');
        times = {};
      }

      // 客户端拿到第一个字节数据时间
      times.TFB = timing.responseStart - timing.navigationStart;

      // 开始解析的时间，可以理解为白屏时间
      times.beginRender = timing.domLoading - timing.navigationStart;

      // DOM 解析耗时
      times.domParseTime = timing.domComplete - timing.domInteractive;

      // DOM READY
      times.DCL = timing.domContentLoadedEventEnd - timing.navigationStart;

      // 加载异步资源的时间，这个时间太长说明经过网络请求的资源较多，或网络环境不佳，
      // times.sourceLoad = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;

      // load 事件
      times.load = timing.loadEventEnd - timing.navigationStart;

      return times;
    }
  </script>
  <script>
    var bodyStart = new Date().getTime();
    loger('[白屏时间] 高清方案脚本，内联样式 (head 里无外链资源)，加载和执行耗时：', bodyStart - headStart);
  </script>
  <script src="https://as.alipayobjects.com/g/component/??react/15.3.2/react.min.js,react/15.3.2/react-dom.min.js"></script>
  <script src="/dist/index.js"></script>
  <script>
  if ('addEventListener' in document) {
    window.addEventListener('load', function() {
      loger('从 bodyStart 到 window onload 耗时：', new Date().getTime() - bodyStart);
      var pt = getPerformanceTiming();
      loger('客户端拿到第一个字节数据时间', pt.TFB);
      loger('浏览器开始解析 dom 的时间', pt.beginRender);
      loger('浏览器解析 dom 耗时', pt.domParseTime);
      loger('domready', pt.DCL);
    }, false);
  }
  </script>
</body>
</html>
